import React from 'react';
class TestForm extends React.Component {
    // 非受控组件：针对表单元素 现用现取 值
    // 有几个表单元素，定义几个ref

    // 受控组件：针对表单元素，随着输入(通过onChange事件)，维护状态state里的值，就是受控组件
    // 建议使用受控组件，这里没有ref

    /*
        高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
            1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
            2.若A函数,调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
        
        函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

    */

    /*
        纯函数：
        1. 一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
            function test1(a){
                // 每次调用，a能保证一样，输出不一样，不是纯函数
                return new Date().getTime() + a
            }
        2.必须遵守以下一些约束
            1)不得改写参数数据
                function test1(a){
                    a = 9 // 错误，改写了参数
                }
            2) 不会产生任何副作用，例如网络请求，输入和输出设备
            3) 不能调用 Date.now()或者Math.random()等不纯的方法
        3. redux的reducer 函数必须是一个纯函数
    
    */
    state = {
        name: '',
        password: ''
    }

    getVal = () => {
        console.log(this.state);
    }

    handleName = (ev) => {
        this.setState({ name: ev.target.value })
    }
    handlePwd = (ev) => {
        this.setState({ password: ev.target.value })
    }
    render() {
        return (<div>
            用户名： <input type="text" value={this.state.name} onChange={this.handleName} /><br />
            密码：<input type="text" value={this.state.password} onChange={this.handlePwd} /><br />

            <button onClick={() => { this.getVal() }}>提交</button>
        </div>)
    }
}



export default TestForm;